<template>
  <div class="m-box">
    <div class="m-title">
      <span class="icon"></span>
      客户争议单管理
    </div>
    <div class="m-form-box">
      <el-form
        ref="formDataRef"
        :model="formData"
        :label-position="labelPosition"
        label-width="100px"
      >
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="客户名称" prop="custName">
                <el-input placeholder="请输入内容" v-model="formData.custName">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="统一社会信用代码" prop="orgUscc">
                <el-input v-model="formData.orgUscc"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple" prop="certType">
              <el-form-item label="证件类型">
                <el-select
                  v-model="formData.certType"
                  placeholder="请选择"
                  class="m-select-box"
                >
                  <el-option
                    v-for="item in cardTypeArr"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple" prop="certNum">
              <el-form-item label="证件号码">
                <el-input v-model="formData.certNum"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="提交日期" prop="submitDate">
                <el-date-picker
                  v-model="formData.submitDate"
                  type="date"
                  placeholder="选择日期"
                  class="u-form-width"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="争议单状态" prop="workOrderStatus">
                <el-select
                  v-model="formData.workOrderStatus"
                  placeholder="请选择"
                  class="u-form-width"
                >
                  <el-option
                    v-for="item in disputeStatusArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="处理结果" prop="handleResult">
                <el-select
                  v-model="formData.handleResult"
                  placeholder="请选择"
                  class="u-form-width"
                >
                  <el-option
                    v-for="item in processResultArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="18"
            ><div class="grid-content bg-purple">
              <el-form-item label="错误种类" prop="errType">
                <el-checkbox-group v-model="formData.problemType" size="small">
                  <el-checkbox-button
                    v-for="item in errTypeArr"
                    :label="item.val"
                    :key="item.val"
                    >{{ item.label }}</el-checkbox-button
                  >
                </el-checkbox-group>
              </el-form-item>
            </div></el-col
          >
          <el-col :span="6" style="text-align: right; margin-bottom: 10px"
            ><div class="grid-content bg-purple">
              <el-button type="primary" size="small" @click="checkInfo"
                >查询</el-button
              >
              <el-button type="primary" size="small" @click="empyInput"
                >清空</el-button
              >
              <el-button type="primary" size="small" @click="newAddDispute(1)"
                ><i class="el-icon-plus"></i> 新建争议单</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-form>
    </div>
    <DicTable
      ref="dictable"
      class="m-table"
      stripe
      align="center"
      border="full"
      :columnData="tableColumns"
      :tableData="tableData"
      :loading="tableLoading"
      :currentPage="parseInt(tablePage.currentPage)"
      :pageSize="parseInt(tablePage.pageSize)"
      :totalResult="parseInt(tablePage.rowCount)"
      :pager="true"
      @on-page-change="handlePageChange"
    >
      <template #certNum="{ row }">
        <text-dialog-model
          :text="row.certNum"
          color="blue"
          type="1"
          title="争议单详情"
          size="70%"
          btnShow="1"
          @showDialog="cardDetailInfo(row.workOrderNbr)"
        >
          <el-form label-width="80px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="申请人名称:">
                  <el-input
                    v-model="dialogData.applyStaffName"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人电话:">
                  <el-input
                    v-model="dialogData.applyStaffPhone"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称:">
                  <el-input v-model="dialogData.custName" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="统一社会信用代码:">
                  <el-input v-model="dialogData.orgUscc" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件类型:">
                  <el-input
                    v-model="dialogData.certTypeName"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件号码:">
                  <el-input v-model="dialogData.certNum" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="错误类型:">
                  <el-input
                    v-model="dialogData.problemName"
                    readonly
                    class="errTypeClass"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="问题描述:">
                  <el-input
                    type="textarea"
                    readonly
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="dialogData.problemDesc"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </text-dialog-model>
      </template>
      <template #opt="{ row }">
        <el-button
          v-if="row.workOrderStatus == 4000 || row.workOrderStatus == 2000"
          type="text"
          class="optBtn"
          @click="newAddDispute(row)"
          >编辑</el-button
        >
        <el-button
          v-if="
            row.workOrderStatus == 1000 ||
            row.workOrderStatus == 2000 ||
            row.workOrderStatus == 3000
          "
          type="text"
          class="optBtn"
          @click="watchDetail(row.workOrderNbr, 1)"
          >修改详情</el-button
        >
        <el-button
          v-if="
            row.workOrderStatus == 1000 ||
            row.workOrderStatus == 2000 ||
            row.workOrderStatus == 3000
          "
          type="text"
          class="optBtn"
          @click="watchDetail(row.workOrderNbr, 2)"
          >查看处理历史</el-button
        >
      </template>
    </DicTable>
    <el-dialog
      width="80%"
      title="修改详情"
      :visible.sync="outerVisible"
      append-to-body
    >
      <el-table
        ref="editInfo"
        :data="editInfoList"
        border
        stripe
        :header-cell-style="{
          background: '#F2F2F2',
          color: '#333',
        }"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="statusDate"
          label="修改时间"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="custName"
          label="客户名称"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="problemName"
          label="错误种类"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="applyStaffName"
          label="申请人名称"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="applyStaffPhone"
          label="申请人电话"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="problemDesc"
          label="问题描述"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="pageHandleCurrentChange"
        :current-page="parseInt(editTablePage.pageIndex)"
        :page-size="parseInt(editTablePage.pageSize)"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(editTablePage.rowCount)"
        class="m-pagination"
      >
      </el-pagination>
    </el-dialog>
    <el-dialog
      width="80%"
      title="查看处理历史"
      :visible.sync="handleHistoryVisible"
      append-to-body
    >
      <el-table
        ref="editInfo"
        :data="editInfoList"
        border
        stripe
        :header-cell-style="{
          background: '#F2F2F2',
          color: '#333',
        }"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="statusDate"
          label="操作时间"
          show-overflow-tooltip
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="custName"
          label="客户名称"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="problemName"
          label="错误种类"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="operator"
          label="操作人"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="operatorPhone"
          label="操作人电话"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="workOrderStatusName"
          label="工单状态"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="handleResult"
          label="申诉结果"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="workOrderDesc"
          label="备注"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="pageHandleCurrentChange"
        :current-page="parseInt(editTablePage.pageIndex)"
        :page-size="parseInt(editTablePage.pageSize)"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(editTablePage.rowCount)"
        class="m-pagination"
      >
      </el-pagination>
    </el-dialog>
    <!-- 新建争议单弹窗组件 -->
    <add-new-dispute
      ref="addNewDispute"
      :dialogData="addDialogData"
      :isVisible="isVisible"
      @closeDialog="addDispute"
    ></add-new-dispute>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import TextDialogModel from "@/components/customer/dialog/TextDialogModel";
import addNewDispute from "@/views/customer/components/addNewDispute";
import DisputeList from "@/api/customer/DisputeList";
import { mapState } from "vuex";
export default {
  name: "CustomerResult",
  data() {
    return {
      //  证件类型
      cardTypeArr: [
      ],
      // 争议单状态
      disputeStatusArr: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1000",
          label: "处理完成",
        },
        {
          value: "2000",
          label: "退单",
        },
        {
          value: "3000",
          label: "待处理",
        },
        {
          value: "4000",
          label: "新建",
        },
      ],
      //  处理结果
      processResultArr: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "申诉无效",
        },
        {
          value: "2",
          label: "申诉有效",
        },
      ],
      //  错误类型
      errTypeArr: [
        {
          label: "统一社会信用代码错误",
          val: "0",
        },
        {
          label: "经营期限字段信息错误",
          val: "1",
        },
        {
          label: "客户名称字段错误",
          val: "2",
        },
        {
          label: "组代无数据",
          val: "3",
        },
        {
          label: "经营状态错误",
          val: "4",
        },
        {
          label: "其他",
          val: "5",
        },
      ],
      formData: {
        custCode: "", //客户编码
        orgUscc: "", // 统一社会信用代码
        custName: "", //客户名称
        certType: "", //证件类型选中值
        // 证件号码
        certNum: "",
        // 提交日期
        submitDate: "",
        // 争议单选中状态
        workOrderStatus: "",
        // 处理结果选中
        handleResult: "",
        // 错误类型
        problemType: [],
      },
      dialogData: {},
      addDialogData: {
        applyStaffName: "",
        applyStaffPhone: "",
        custName: "",
        orgUscc: "",
        certType: "",
        certNum: "",
        problemType: [], //错误类型
        problemDesc: "",
      },
      // 表单标签排列方式方式
      labelPosition: "left",

      tableColumns: [
        // { type: "seq", width: 60, fixed: null },
        // { type: "checkbox", width: 50, fixed: null },
        {
          field: "submitDate",
          title: "提交日期",
          showOverflow: true,
          width: 140,
        },
        {
          field: "workOrderNbr",
          title: "争议单编号",
          showOverflow: true,
          width: 130,
        },
        { field: "proviceName", title: "省份", showOverflow: true, width: 100 },
        {
          field: "applyStaffName",
          title: "申请人姓名",
          showOverflow: true,
          width: 100,
        },
        {
          field: "applyStaffPhone",
          title: "申请人电话",
          showOverflow: true,
          width: 100,
        },
        {
          field: "custName",
          title: "客户姓名",
          showOverflow: true,
          width: 100,
        },
        {
          field: "orgUscc",
          title: "社会统一信用代码",
          width: 150,
          showOverflow: true,
        },
        {
          field: "certTypeName",
          title: "证件类型",
          width: 150,
          showOverflow: true,
        },
        {
          slotName: "certNum",
          title: "证件号码",
          width: 150,
          showOverflow: true,
        },
        {
          field: "problemName",
          title: " 错误种类 ",
          width: 200,
          showOverflow: true,
        },
        {
          field: "workOrderStatusName",
          title: "争议单状态",
          showOverflow: true,
          width: 100,
        },
        {
          field: "handleResult",
          title: "处理结果",
          showOverflow: true,
          width: 100,
        },
        { slotName: "opt", title: "操作", width: 250, fixed: "right" },
      ],
      tableData: [], //争议单列表
      tableLoading: false,
      tablePage: {
        currentPage: 1,
        pageSize: 5,
        rowCount: 0,
      },
      editInfoList: [], //修改历史
      editTablePage: {
        pageIndex: 1,
        pageSize: 5,
        rowCount: 0,
      },
      outerVisible: false, //查看详情弹窗显隐
      handleHistoryVisible: false, //查看处理历史弹窗显隐
      isVisible: false, //新建争议单弹窗显隐
      workOrderNbr: "", //查看历史记录需要的字段
      num: 1, //判断是修改历史还是处理历史
      loginPhone:'',//登录人手机号码
    };
  },
  components: {
    DicTable,
    TextDialogModel,
    addNewDispute,
  },
  created() {},
  computed:{
    ...mapState("user", ["user"]),
  },
  mounted() {
    this.initValue();
    this.getDisputeList();
    this.getStaffPhone();
  },
  methods: {
    async initValue() {
      const response = await DisputeList.initValue({ flag: "cert_type" });
      if (response.code == 200) {
        this.cardTypeArr = response.meta.customers;
      }
    },
    async getStaffPhone() {
      const response = await DisputeList.getStaffPhone({ STAFF_ID: this.user.staffId });
      if (response.code == 200) {
        this.loginPhone = response.meta.MOBILE_PHONE;
      }
    },
    async getDisputeList() {
      let parmas = {
        pageIndex: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        custName: this.formData.custName,
        orgUscc: this.formData.orgUscc,
        certType: this.formData.certType,
        certNum: this.formData.certNum,
        submitDate: this.formData.submitDate,
        workOrderStatus: this.formData.workOrderStatus,
        handleResult: this.formData.handleResult,
        applyStaffId:this.user.staffId,
        problemType: this.formData.problemType.join("|"),
      };
      const response = await DisputeList.getDisputeList(parmas);
      if (response.code == 200) {
        this.tableData = response.meta.disputeList;
        this.tableData.forEach((item) => {
          let problemName = [];
          let workOrderStatusName = "";
          item.handleResult = item.handleResult
            ? item.handleResult == 1
              ? "申诉无效"
              : "申诉有效"
            : "";
          if (item.problemType) {
            item.problemType = item.problemType.split(",");
            item.problemType.forEach((i) => {
              if (i == "0") {
                problemName.push("统一社会信用代码错误");
              } else if (i == "1") {
                problemName.push("经营期限字段信息错误");
              } else if (i == "2") {
                problemName.push("客户名称字段错误");
              } else if (i == "3") {
                problemName.push("组代无数据");
              } else if (i == "4") {
                problemName.push("经营状态错误");
              } else if (i == "5") {
                problemName.push("其他");
              } else {
                problemName.push("");
              }
              item.problemName = problemName.join("，");
            });
          } else {
            item.problemName = "";
          }
          if (item.workOrderStatus == "1000") {
            workOrderStatusName = "处理完成";
          } else if (item.workOrderStatus == "2000") {
            workOrderStatusName = "退单";
          } else if (item.workOrderStatus == "3000") {
            workOrderStatusName = "待处理";
          } else if (item.workOrderStatus == "4000") {
            workOrderStatusName = "新建";
          } else {
            workOrderStatusName = "";
          }
          item.workOrderStatusName = workOrderStatusName;
          item.submitDate = item.submitDate
            ? item.submitDate.substring(0, 4) +
              "-" +
              item.submitDate.substring(4, 6) +
              "-" +
              item.submitDate.substring(6, 8) +
              " " +
              item.submitDate.substring(8, 10) +
              ":" +
              item.submitDate.substring(10, 12) +
              ":" +
              item.submitDate.substring(12, 14)
            : "";
        });
        this.tablePage.rowCount = response.meta.pageInfo.rowCount;
      }
    },
    //页面改变
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.getDisputeList();
    },
    editRow(row) {
      
    },
    //查询信息
    checkInfo() {
      this.tablePage.currentPage = 1;
      this.tablePage.pageSize = 5;
      this.getDisputeList();
    },
    //清空input框内容
    empyInput() {
      this.formData = {
        custCode: "", //客户编码
        orgUscc: "", // 统一社会信用代码
        custName: "", //客户名称
        certType: "", //证件类型选中值
        // 证件号码
        certNum: "",
        // 提交日期
        submitDate: "",
        // 争议单选中状态
        workOrderStatus: "",
        // 处理结果选中
        handleResult: "",
        // 错误类型
        problemType: [],
      };
    },
    async cardDetailInfo(val) {
      let parmas = {
        pageIndex: 1,
        pageSize: 1,
        workOrderNbr: val,
      };
      const response = await DisputeList.getDisputeList(parmas);
      if (response.code == 200) {
        this.dialogData = response.meta.disputeList;
        this.dialogData.forEach((item) => {
          if (item.problemType) {
            let problemName = [];
            item.problemType = item.problemType.split(",");
            item.problemType.forEach((i) => {
              if (i == "0") {
                problemName.push("统一社会信用代码错误");
              } else if (i == "1") {
                problemName.push("经营期限字段信息错误");
              } else if (i == "2") {
                problemName.push("客户名称字段错误");
              } else if (i == "3") {
                problemName.push("组代无数据");
              } else if (i == "4") {
                problemName.push("经营状态错误");
              } else if (i == "5") {
                problemName.push("其他");
              } else {
                problemName.push("");
              }
              item.problemName = problemName.join("，");
            });
          } else {
            item.problemName = "";
          }
        });
        this.dialogData = this.dialogData[0];
      }
    },
    //新建争议单
    newAddDispute(val) {
      this.isVisible = true;
      if(val == 1){
        this.$refs.addNewDispute.custAddData.oldPhotoPath = ''
        this.$refs.addNewDispute.photoPath = ''
        this.$refs.addNewDispute.custAddList = []
        this.addDialogData = {
          applyStaffName: this.user.staffName,
          applyStaffPhone: this.loginPhone,
          custName: "",
          orgUscc: "",
          certType: "",
          certNum: "",
          problemType: [], //错误类型
          problemDesc: "",
        }
      }else {
        this.addDialogData = Object.assign({},val)
        if(val.appendix){
          this.$refs.addNewDispute.custAddData.oldPhotoPath = val.appendix
          this.$refs.addNewDispute.getCustPhoto(val.appendix)
        }
        this.addDialogData.flag = 1
      }
    },
    //查看详情
    watchDetail(val, num) {
      this.workOrderNbr = val;
      this.num = num;
      if (num == 1) {
        this.outerVisible = true;
      } else {
        this.handleHistoryVisible = true;
      }
      this.watchHandleHistory();
    },

    //查看处理历史
    async watchHandleHistory(val) {
      let parmas = {
        pageIndex: val ? this.editTablePage.pageIndex : 1,
        pageSize: 5,
        workOrderNbr: this.workOrderNbr,
        workOrderStatusList: this.num == 1 ? '3000' : '1000,2000',
      };
      const response = await DisputeList.getDisputeListHistory(parmas);
      if (response.code == 200) {
        this.editInfoList = response.meta.disputeListHistory;
        this.editTablePage.rowCount = response.meta.pageInfo.rowCount;
        this.editInfoList.forEach((item) => {
          let problemName = [];
          let workOrderStatusName = "";
          item.handleResult = item.handleResult
            ? item.handleResult == 1
              ? "申诉无效"
              : "申诉有效"
            : "";
          if (item.problemType) {
            item.problemType = item.problemType.split(",");
            item.problemType.forEach((i) => {
              if (i == "0") {
                problemName.push("统一社会信用代码错误");
              } else if (i == "1") {
                problemName.push("经营期限字段信息错误");
              } else if (i == "2") {
                problemName.push("客户名称字段错误");
              } else if (i == "3") {
                problemName.push("组代无数据");
              } else if (i == "4") {
                problemName.push("经营状态错误");
              } else if (i == "5") {
                problemName.push("其他");
              } else {
                problemName.push("");
              }
              item.problemName = problemName.join("，");
            });
          } else {
            item.problemName = "";
          }
          if (item.workOrderStatus == "1000") {
            workOrderStatusName = "处理完成";
          } else if (item.workOrderStatus == "2000") {
            workOrderStatusName = "退单";
          } else if (item.workOrderStatus == "3000") {
            workOrderStatusName = "待处理";
          } else if (item.workOrderStatus == "4000") {
            workOrderStatusName = "新建";
          } else {
            workOrderStatusName = "";
          }
          item.workOrderStatusName = workOrderStatusName;
          item.statusDate = item.statusDate
            ? item.statusDate.substring(0, 4) +
              "-" +
              item.statusDate.substring(4, 6) +
              "-" +
              item.statusDate.substring(6, 8) +
              " " +
              item.statusDate.substring(8, 10) +
              ":" +
              item.statusDate.substring(10, 12) +
              ":" +
              item.statusDate.substring(12, 14)
            : "";
        });
      }
    },
    //修改历史改变页码
    pageHandleCurrentChange(val) {
      this.editTablePage.pageIndex = val;
      this.watchHandleHistory(val);
    },
    addDispute() {
      this.isVisible = !this.isVisible;
      this.getDisputeList();
    },
  },
};
</script>
<style lang="scss" scoped>
.select-box {
  width: 100px;
}
.m-title {
  margin-bottom: 0.2rem;
  color: #0052d9;
  font-size: 0.12rem;
}
.m-title .icon {
  float: left;
  display: block;
  width: 0.04rem;
  height: 0.12rem;
  background: rgb(245, 111, 60);
  margin-top: 0.02rem;
  margin-right: 0.1rem;
  font-size: 0.14rem;
}
.m-select-box,
.u-form-width {
  width: 100%;
}
.m-form-box {
  background: #fff;
}
.m-box {
  background: #fff;
  border-radius: 0.2rem;
  margin: 0.2rem;
  padding: 0.3rem 0.2rem;
}
.optBtn {
  padding-left: 0;
  padding-right: 0;
}
.m-pagination {
  margin-top: 10px;
  margin-right: 30px;
  text-align: right;
}
</style>
